<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>数据统计</title>

    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link rel="bookmark" th:href="@{/favicon.ico}"/>
    <link th:href="@{/src/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/src/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/src/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/src/css/style.css}" rel="stylesheet"/>

    <link th:href="@{/src/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>产品库存占比</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content" style="height: 355px;">
                        <div class="echarts" id="echarts-pie-chart" style="height: 350px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>产品年度月销量</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content" style="height: 355px;">
                        <form class="form-horizontal">
                            <div class="col-sm-6">
                                <label class="col-sm-6 control-label">年份：</label>
                                <div class="col-sm-6" style="padding-left: 0px;">
                                    <select class="form-control m-b" name="year" onchange="loadBar()">
                                        <option value="2018">2018</option>
                                        <option value="2019">2019</option>
                                        <option value="2020">2020</option>
                                        <option value="2021">2021</option>
                                        <option value="2022">2022</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-sm-6 control-label">产品：</label>
                                <div class="col-sm-6" style="padding-left: 0px;">
                                    <select class="form-control m-b" name="productY" onchange="loadBar()">
                                    </select>
                                </div>
                            </div>
                        </form>
                        <div class="echarts" id="echarts-bar-chart"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>产品月度日销量趋势</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content" style="height: 355px;">
                        <form class="form-horizontal">
                            <div class="col-sm-2">
                                <label class="col-sm-5 control-label">年份：</label>
                                <div class="col-sm-7" style="padding-left: 0px;">
                                    <select class="form-control m-b" name="yearL" onchange="loadLine()">
                                        <option value="2018">2018</option>
                                        <option value="2019">2019</option>
                                        <option value="2020">2020</option>
                                        <option value="2021">2021</option>
                                        <option value="2022">2022</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <label class="col-sm-6 control-label">月份：</label>
                                <div class="col-sm-6" style="padding-left: 0px;">
                                    <select class="form-control m-b" name="month" onchange="loadLine()">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <label class="col-sm-5 control-label">产品：</label>
                                <div class="col-sm-7" style="padding-left: 0px;">
                                    <select class="form-control m-b" name="productL" id="proL1" onchange="loadLine()">
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <label class="col-sm-5 control-label">产品：</label>
                                <div class="col-sm-7" style="padding-left: 0px;">
                                    <select class="form-control m-b" name="productL" id="proL2" onchange="loadLine()">
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <label class="col-sm-5 control-label">产品：</label>
                                <div class="col-sm-7" style="padding-left: 0px;">
                                    <select class="form-control m-b" name="productL" id="proL3" onchange="loadLine()">
                                    </select>
                                </div>
                            </div>
                        </form>
                        <div class="echarts" id="echarts-line-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 全局js -->
    <script th:src="@{/src/js/jquery.min.js}"></script>
    <script th:src="@{/src/js/bootstrap.min.js}"></script>

    <!-- 自定义js -->
    <script th:src="@{/src/js/content.js}"></script>
    <script th:src="@{/src/js/commons.js}"></script>

    <!-- ECharts -->
    <script th:src="@{/src/js/plugins/echarts/echarts-all.js}"></script>

    <script>
        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
        pieChart.showLoading();
        var pieoption = {
            title : {
                text: '',
                subtext: '',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:[]
            },
            // calculable : true,   // 可计算，拖动饼块合并
            series : [
                {
                    name:'库存',
                    type:'pie',
                    radius : '75%', // 大小
                    center: ['50%', '50%'], // 位置
                    data:[]
                }
            ]
        };

        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        var baroption = {
            title : {
                text: ''
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:[]
            },
            grid:{
                x:30,   // 左上角坐标
                x2:40,  // 右下角坐标
                y2:24
            },
            // calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'',
                    type:'bar',
                    data:[],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };

        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
        var lineoption = {
            title : {
                text: ''
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:[]
            },
            grid:{
                x:40,
                x2:40,
                y2:24
            },
            // calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : []
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        // formatter: '{value}'
                    }
                }
            ],
            series : [
                {
                    name:'',
                    type:'line',
                    data:[],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };

        function loadBar(){
            barChart.showLoading();
            $.ajax({
                type: "GET",
                url: getContext() + "/proJ/bar",
                dataType: "json",
                data: {
                    year: $("select[name='year']").val(),
                    proId: $("select[name='productY']").val()
                },
                async: true,
                success: function(data){
                    if(100 === data.code){
                        // baroption.legend.data.push($("select[name='productY'] option:selected").text());
                        baroption.series[0].name = $("select[name='productY'] option:selected").text();
                        baroption.series[0].data = data.details.barSeries;

                        console.log(baroption)

                        barChart.hideLoading();
                        barChart.setOption(baroption);
                        window.onresize = barChart.resize;
                    }
                }
            });
        }

        function loadLine(){
            var proLs = $("select[name='productL']");
            for(var i = 0;i < proLs.length;i++){
                for(var j = i + 1;j < proLs.length;j++){
                    if(proLs[i].value === proLs[j].value){
                        var options = $(proLs[i]).children();
                        options.each(function(index,val){
                            var b = true;
                            for(var k = 0;k < proLs.length;k++){
                                if(val.value === proLs[k].value){
                                    b = false;
                                    break;
                                }
                            }
                            if(b){
                                val.selected = true;
                                return false;
                            }
                        })
                    }
                }
            }

            var proIds = new Array();
            proLs.each(function(index,val){
                proIds.push(parseInt($(val).val()));
            })

            lineChart.showLoading();
            $.ajax({
                type: "GET",
                url: getContext() + "/proJ/line",
                dataType: "json",
                data: {
                    year: $("select[name='yearL']").val(),
                    month: $("select[name='month']").val(),
                    proIds: JSON.stringify(proIds)
                },
                async: true,
                success: function(data){
                    if(100 === data.code){
                        lineoption.legend.data = data.details.legend;
                        lineoption.xAxis[0].data = data.details.xaxis;
                        lineoption.series = data.details.series;

                        console.log(lineoption)

                        lineChart.hideLoading();
                        lineChart.setOption(lineoption);
                        window.onresize = lineChart.resize;
                    }
                }
            });
        }

        $(function(){
            $.ajax({
                type: "GET",
                url: getContext() + "/proJ/pie",
                dataType: "json",
                success: function(data){
                    if(100 === data.code){
                        pieoption.legend.data = data.details.pieLegend;
                        pieoption.series[0].data = data.details.pieSeries;

                        pieChart.hideLoading();
                        pieChart.setOption(pieoption);
                        $(window).resize(pieChart.resize);
                    }
                }
            });

            $.ajax({
                type: "GET",
                url: getContext() + "/proJ/",
                dataType: "json",
                async: false,
                success: function(data){
                    if(100 === data.code){
                        var html = '';
                        data.details.forEach(function(val){
                            html += '<option value="' + val.proId + '">' + val.proName + '</option>';
                        })
                        $("select[name='productY']").append(html);
                        $("#proL1").append(html);
                        $("#proL2").append(html);
                        var options = $("#proL2").children();
                        options[1].selected = true;
                        $("#proL3").append(html);
                        options = $("#proL3").children();
                        options[2].selected = true;
                    }
                }
            });

            loadBar();
            loadLine();
        })
    </script>

</body>

</html>
